<template>
	<view class="container" style="padding: 0;">
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#000"> {{ title }} </tn-navbar>
		<!-- banner -->
		<image :src="sConf.pics + banner" mode="scaleToFill" style="width: 100%; height: 200px;margin: 0;padding: 0;">
		</image>
		<!-- 正文 -->
		<view v-if="reqsnData !== null" style="display: flex;flex-direction: column;gap: 20px;">
			<view
				style="background-color: #fff;padding: 15px 10px;border-radius: 10px;display: flex;justify-content: space-between;align-items: center;">
				<view class="title-header">支付金额</view>
				<view>￥<text style="color: #dd524d;font-weight: bold;font-size: larger;">{{ ((reqsnData.aprice ?? 0) /
					100).toFixed(2)}}</text>元
				</view>
			</view>
			<view v-if="false"
				style="padding: 15px 10px;border-radius: 10px;display: flex;flex-direction: column;background-color: #fff;"
				:class="warn ? 'warn-address' : ''" @tap="addressChange">
				<view style="display: flex;justify-content: space-between;padding: 10px 0;">
					<view class="title-header">收货人</view>
					<view>
						{{ zipStr(curAddress?.name) }}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 10px 0;">
					<view class="title-header">联系电话</view>
					<view>
						{{ zipStr(curAddress?.phone) }}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 10px 0;">
					<view class="title-header">区域</view>
					<view>
						{{ curAddress?.sheng }}{{ curAddress?.shi }}{{ curAddress?.xian }}{{ curAddress?.zhen }}
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 10px 0;">
					<view class="title-header">详细地址</view>
					<view>
						{{ curAddress?.address }}
					</view>
				</view>
			</view>

			<view style="padding: 15px 10px;border-radius: 10px;background-color: #fff;">
				<view class="actButton bg-wxpay" @tap="wepayChange">
					<tn-icon name="payment-wechat" size="48"></tn-icon>
					<text style="font-size: large;">微信支付</text>
				</view>
			</view>

		</view>
	</view>

	<tn-action-sheet ref="actionSheetRef"></tn-action-sheet>
</template>

<script>
import utils from '../../common/utils';

export default {
	data() {
		1
		return {
			title: '微信支付',
			sConf: getApp().globalData,
			banner: '/media/images/wepay.webp',
			reqsnData: null,
			addressData: null,
			curAddress: null,
			warn: false
		}
	},
	onLoad(options) {
		console.log("onLoad", 'wxpay');
		const reqsn = Number(options.reqsn || 0)
		this.loadStaffReqsn(reqsn)
		// this.loadStaffAddress()
	},
	onReady() {
		console.log('onReady');
	},
	onShow() {
		console.log('onShow');
	},
	methods: {
		/**
		 * 隐藏号码
		 * @param {String} e
		 */
		zipStr(e) {
			return utils.zipStr(e)
		},
		/**
		 * 加载订单详情
		 * @param {Number} e
		 */
		loadStaffReqsn(e) {
			console.log('loadStaffReqsn', e);
			let host = this.sConf.host + '/weapps/listReqsn/' + e + '/';
			let token = this.sConf.token || '';
			utils.authenticatorRead(host, token).then((res) => {
				console.log('加载订单详情', res);
				if (res.rescode === 200) {
					this.reqsnData = res.resmsg
				}
			});
		},
		/**
		 * 加载用户收货地址
		 */
		loadStaffAddress() {
			let host = this.sConf.host + '/weapps/address/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id
			}
			utils.authenticatorList(host, token, data).then((res) => {
				console.log('加载收货地址', res);
				if (res.rescode === 200) {
					this.addressData = res.resmsg
				}
			});
		},
		/**
		 * 调出收货地址选项框
		 */
		addressChange() {
			console.log('addressChange');
			let tmpData = []
			this.addressData.forEach(item => {
				tmpData.push({
					value: item.id,
					text: this.zipStr(item.name) + ' ' + this.zipStr(item.phone),
					desc: item.address
				})
			})
			this.$refs.actionSheetRef.show({
				actions: tmpData,
				title: '请选择收货信息',
				cancel: () => {
					return true
				},
				select: (index, value) => {
					console.log('选项被点击', index, value)
					this.convolAddress(value)
					this.warn = false
					return true
				}
			})
		},
		/**
		 * 转换地址对象
		 * @param {Object} e
		 */
		convolAddress(e) {
			this.curAddress = this.addressData.find(item => item.id === e)
		},
		/**
		 * 调起支付
		 */
		wepayChange() {
			let that = this
			// if (this.curAddress === null) {
			// 	this.warn = true
			// 	// #ifdef MP-WEIXIN
			// 	wx.vibrateShort();
			// 	// #endif
			// 	return
			// }
			let host = this.sConf.host + '/weapps/postReqsn/';
			let token = this.sConf.token || '';
			let data = {
				reqsn: this.reqsnData.reqsn
				// ,address: this.curAddress.id
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('创建支付订单', res);
				if (res.rescode === 200) {
					this.wepayGoChange(res.resmsg)
				}
			})
		},
		/**
		 * 支付
		 * @param {Object} e
		 */
		wepayGoChange(e) {
			let that = this
			uni.requestPayment({
				provider: "wxpay",
				timeStamp: e.timeStamp,
				nonceStr: e.nonceStr,
				package: e.package,
				signType: e.signType,
				paySign: e.paySign,
				success(r) {
					console.log('支付成功');
					uni.showToast({
						icon: 'success',
						title: 'res.data',
						duration: 3000,
						complete() {
							uni.redirectTo({
								url: '/pages/reqsn/reqsn'
							})
						}
					})

				},
				fail(e) {
					console.log('支付失败', e);
					uni.showToast({
						icon: 'error',
						title: '支付失败'
					})
					// that.reWepayChange()
				}
			})
		},
		/**
		 * 关闭支付
		 */
		reWepayChange() {
			let host = this.sConf.host + '/weapps/canalReqsn/';
			let token = this.sConf.token || '';
			let data = {
				reqsn: this.reqsnData.reqsn
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('关闭支付订单', res);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.title-header {
	font-weight: bold;
	padding-right: 10px;
	white-space: nowrap;
}

.warn-address {
	border: 1px solid #dd524d;
}
</style>